<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe66b;</i>
        <span>{{ $t("patch.product") }}</span>
      </h2>
    </template>
    <template v-slot:global-button>
      <el-popconfirm
        :title="$t('patch.delete_product')"
        @confirm="handleDelete"
        icon-color="red"
        cancel-button-type="default"
        confirm-button-type="danger"
      >
        <authorization-button type="danger" slot="reference" size="medium" name="Product:delete">
          {{ $t("patch.delete_product_button") }}
        </authorization-button>
      </el-popconfirm>
    </template>
    <template v-slot:content>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="tag in tags"
          :key="tag"
          :label="$t(tag)"
          :name="tag"
        >
        </el-tab-pane>
      </el-tabs>
      <router-view :form="productDetail" />
    </template>
  </page>
</template>

<script>
import { getProductList } from "@/api/patch";
import Page from "@/components/Page";
import { deleteProduct } from "@/api/patch";
import AuthorizationButton from "@/components/AuthorizationButton";
export default {
  components: {
    Page,
    AuthorizationButton
  },
  data() {
    return {
      activeName: this.$route.name,
      productDetail: {},
      tags: [
        "detail",
        "patch.package_group",
        // "system.dashboard"
      ],
    };
  },
  methods: {
    getProductList,
    handleClick(tab) {
      const name = tab.$el.id.replace("pane-", "");
      if (name == this.$route.name) return;
      this.$router.push({
        name,
        query: { page: 1, per_page: 20 },
      });
    },
    handleDelete() {
      deleteProduct({ id: this.$route.params.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$router.push("/patch/product");
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
  },
  // beforeRouteUpdate(to, from, next) {
  //   // let _this= this;
  //   if (to.name === "detail") {
  //     this.activeName = to.name;
  //   }
  //   next();
  // },
  mounted() {
    this.getProductList(this.$route.params).then((res) => {
      this.productDetail = res.data.data;
    });
  },
  watch: {
    productDetail: {
      handler(newvalue, oldvalue) {
        if (!this.$store.state.patch.selectProd) {
          this.$store.commit("set_prod", { selectProd: newvalue.name });
        }
      },
      deep: true,
    },
  },
};
</script>

<style>
</style>